<template>
    <IModal v-model="defaultValue" width="500">
        <Form ref="formCreate" label-position="top">
            <Row :gutter="20">
                <Col span="12" v-for="(item, index) in props.element" :key="index">
                    <FormItem  :label="item">
                        <Input v-model="elementValues[index]"></Input>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="primary" long @click="submit()">提交</Button>
        </div>
    </IModal>
</template>

<script>
    import IModal from "../../../../components/layout/IModal";
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";

    export default {
        name: "IElement",
        components: {IModal},
        mixins: [IDrawerMixins],
        props: {
            element: {
                type: [String],
                default: '',
                required: true
            }
        },
        data() {
            return {
                elementValues: this.defaultElement()
            }
        },
        methods: {
            submit() {
                let elementArr = Array(this.props.element.length);
                for (let i = 0; i<elementArr.length; i++){
                    elementArr[i] = this.elementValues[i] || '';
                }
                this.$emit('on-input', elementArr.join("|"));
                this.defaultValue = false;
            },
            defaultElement(){
                return this.element.split('|');
            }
        }
    }
</script>

<style scoped>

</style>
